import React, { useState, useEffect } from 'react'
import Test from './Test'

// useEffect 模拟类组件中的生命周期钩子函数. 只模拟了挂载(componentDidMount), 更新(compnentDidUpdate)和卸载(componentWillUnmount)

export default function App() {
  console.log('app组件代码执行了')
  // 定义状态
  const [c, setC] = useState(1)

  // 使用useEffect

  // 1.不写第二个参数:  useEffec的外层函数默认模拟挂载和更新.内部函数模拟卸载. 但是更新前会先执行卸载
  // 2.第二个参数是空数组: useEffect外层函数只模拟挂载,内部还是卸载(常用)
  // 3. 第二个参数中写了某些数据(表示监听这些数据). 监听的数据只要有一个发生变化,则外层模拟更新.如果监听的数据没有发生变化则外层不模拟更新
  useEffect(() => {
    // 外层的这个函数,模拟了挂载和更新
    console.log('外层还是执行了--挂载/更新')
    // PubSub.subscribe()
    return () => {
      // PubSub.unsubscribe()
      // 内部的这个函数模拟的是卸载
      console.log('内部的函数执行了-卸载')
    }
  }, [])

  return (
    <div>
      <p>{c}</p>
      <button
        onClick={() => {
          setC(c + 1)
        }}
      >
        +
      </button>
      {/* {c === 1 && <Test></Test>} */}
    </div>
  )
}
